<template>
    <div class="bigbang">
        <div class="one">
        <p>爆爆团</p>
        <p style="font-size:30px">限时抢购 超级低价</p>
        </div>
        <div class="contcent">
    <div  class="top">
        <div @click="gets(index)" v-for="(item,index) in tasklist" :key="index" :class="{active:currentIndex==index}">{{item.text}}</div>
    </div>
    <div class="footer" >
        <div class="item" v-for="(item,index) in (currentIndex==0? list:lists)" :key="index">
            <div class="banner">
                <img :src="item.picture" alt="">
            </div>
            <div class="cont">
                <div class="name">{{item.name}}</div>
                <span>￥{{item.min_price}}</span>
                <span>{{item.promotion_info}}</span> 
               <button @click="getc(item)">{{item.status== 0 ?'马上抢':'已抢到'}}</button>
            </div>
        </div>
    </div>
    
  </div>
    </div>
    
</template>

<script>

import {tuan_list} from "../api/api";
export default {
name:'bigbang',
data(){
    return{
        currentIndex:0,
        tasklist:[
            {text:'正在抢购'},
            {text:'上新预告'},
        ],
        list:[],
        lists:[],
        
      
    }

},methods:{
    gets(index){
        this.currentIndex=index
   
          
    },
    getc(item){
        item.status++
    }
  
   
},mounted(){
   tuan_list({params:{status:0}}).then((res)=>{

    
      this.list=res.data.list
   
   })
   tuan_list({params:{status:1}}).then((res)=>{
       res.data.list.map((res)=>{
           res.status=0
           
        })
        this.lists=res.data.list

       
   })
}

}


</script>

<style scoped>
.one {
  height: 150px;
  text-align: center;
  line-height: 70px;
  color: white;
}
.top{
    width: 200px;
    display: flex;
    justify-content: space-around;
    font-size: 18px;
}
.active{
    color:  #2be5cd;
}

.item  .banner{
    width: 100px;
    height: 100px;
    
}
.item  .banner img{
    width: 90%;
    height: 90%;
}
.item{
    width: 80%;
    height: 100px;
    margin: auto;
    display: flex;
    justify-content: space-around;
    background-color: white;
    margin-bottom: 20px;
    border-radius:10px ;
    padding: 10px;
    
}
.cont{
    width: 200px;
    height: 100px;
    line-height: 30px;
}
.footer{
    margin-top: 30px;
    height: 410px;
    overflow:auto ;
    
}
button{
    width: 65px;
    height: 30px;
    border-radius:30px ;
    margin-left: 10px;
    background-color: orangered;
    color: white;
}
.bigbang{
    background-image: url('https://img.alicdn.com/imgextra/i3/737575635/TB28NfkaDGGJuJjSZFvXXXqTXXa_!!0-martrix_bbs.jpg');
}
</style>